<template>
  <div class="app-container">
    <el-form
      size="mini"
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item style="margin-right: 100px">
        <el-button type="primary" size="mini" @click="toAddPage" v-hasPermi="['system:coupon:add']">新增优惠券</el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete"
          v-hasPermi="['system:coupon:remove']"
          @click="handleDelete">删除</el-button>
      </el-form-item>
      <el-form-item prop="orderType">
        <el-select v-model="queryParams.couponType" placeholder="类型" clearable size="mini">
          <el-option :label="item.label" :value="item.value" v-for="item in couponTypeList"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="orderType">
        <el-select v-model="queryParams.couponStatus" placeholder="状态" clearable size="mini">
          <el-option :label="item.label" :value="item.value" v-for="item in couponStatusList"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="couponId">
        <el-input
          v-model="queryParams.orderNum"
          placeholder="编号"
          clearable
          size="mini"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" align="center">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="编号" prop="couponId" :show-overflow-tooltip="true"/>
      <el-table-column label="类型" prop="goodsName">
        <template #default="{row}">{{row.couponType|couponType}}</template>
      </el-table-column>
      <el-table-column label="使用条件" prop="goodsStandard">
        <template #default="{row}">{{row.couponType == 1 ? '无限制' : `满${row.couponCondition}减${row.discount}`}}</template>
      </el-table-column>
      <el-table-column label="折扣/满减金额" prop="codeStatus">
        <template #default="{ row }">
          {{row.couponType == 1 ? `${row.discount}%` : row.discount }}
        </template>
      </el-table-column>
      <el-table-column label="已兑换/已使用">
        <template #default="{row}">{{`${row.exchangeNum || 0}/${row.useNum || 0}`}}</template>
      </el-table-column>
      <el-table-column label="有效期" :show-overflow-tooltip="true">
        <template #default="{row}">
          {{`${row.validNum}${row.validType == 'day' ? '天' : row.validType == 'month' ? '个月' : '年'}`}}
        </template>
      </el-table-column>
      <el-table-column label="截止兑换时间" :show-overflow-tooltip="true">
        <template #default="{row}">
          {{`${row.startTime}至${row.endTime}`}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="{row}">
          {{row.couponStatus | couponStatus}}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="couponDesc"></el-table-column>
      <el-table-column label="操作" width="160" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="toAddPage(scope.row, true)"
            v-hasPermi="['system:coupon:details']"
          >查看
          </el-button>
          <!--<el-button
            size="mini"
            type="text"
            @click="toAddPage(scope.row)"
            v-hasPermi="['system:exCode:detail']"
          >编辑
          </el-button>-->
          <el-button
            size="mini"
            type="text"
            class="delete-btn"
            @click="updateCode(scope.row, 2)"
            v-if="scope.row.couponStatus != 2"
            v-hasPermi="['system:coupon:update']"
          >禁用
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="updateCode(scope.row, 0)"
            v-if="scope.row.couponStatus == 2"
            v-hasPermi="['system:coupon:update']"
          >启用
          </el-button>
          <el-button
            size="mini"
            type="text"
            class="delete-btn"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:coupon:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit="queryParams.pageSize"
      layout="sizes, prev, pager, next"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import {couponList,couponRemove,couponStatus} from "@/api/system/coupon";
  import mixins from "./mixins";

  export default {
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        orderNums: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 订单表格数据
        orderList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderType: null,
          userType: null,
          orderNum: null,
          phonenumber: null,
          nickName: null,
          startTime: null,
          endTime: null,
          time: null
        }
      };
    },

    mixins: [mixins],

    created() {
      this.getList();
    },
    methods: {
      // 查询列表
      getList() {
        this.loading = true;
        couponList(this.queryParams).then(response => {
          this.orderList = response.rows
          this.total = response.total;
          this.loading = false;
        });
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.couponId);
        this.orderNums = selection.map(item => item.orderNum);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },

      // 查看详情
      handleView(row) {
        this.$router.push({
          name: "exCodeDetails",
          params: {
            id: row.id
          }
        });
      },

      // 跳转到新增页面
      toAddPage(row, isDetail) {
        this.$router.push({
          name: isDetail ? "couponDetail" : "editCoupon",
          query: {
            id: row && row.couponId
          }
        });
      },

      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.couponId || this.ids;
        this.$confirm(
            '确认删除选中优惠券吗？',
            "警告",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
        )
            .then(function () {
              return couponRemove(ids);
            })
            .then(() => {
              this.getList();
              this.msgSuccess("删除成功");
            })
            .catch(function () {
            });
      },

      // 启用、禁用兑换码
      updateCode(row,status) {
        let {couponId} = row
        couponStatus({id: couponId, status}).then(res => {
          this.$message.success('操作成功！')
          this.getList()
        })
      }
    }
  };
</script>

